<template>
    <div class="table">
        <div class="crumbs">
            <i class="el-icon-tickets"></i>歌单歌曲信息
        </div>
        <div class="container">
            <div class="handle-box">
                <i class="el-icon-search"></i>
                <el-input v-model="select_word" size="mini" placeholder="请输入歌曲名" class="handle-input"></el-input>
                <el-button type="danger" size="mini" @click="delAll" style="float: right;">批量删除</el-button>
                <el-button type="primary" size="mini" @click="centerDialogVisible=true" style="float: right;">添加歌曲</el-button>
            </div>
        </div>
        <el-table size="mini" border style="width: 100%" height="680px" :data="data" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="40px"></el-table-column>
        <el-table-column label="歌曲图片" width="110" align="center">
            <template slot-scope="scope">
                <div class="song-img">
                    <img :src="getUrl(scope.row.pic)" style="width: 100%"/>
                </div>
                <div class="play" @click="setSongUrl(scope.row.url,scope.row.name)">
                    <div v-if="toggle == scope.row.name">
                    <svg class="icon">
                        <use xlink:href="#icon-zanting"></use>
                    </svg>
                    </div>
                    <div v-if="toggle != scope.row.name">
                    <svg class="icon">
                        <use xlink:href="#icon-bofanganniu"></use>
                    </svg>
                    </div>
                </div> 
            </template>
        </el-table-column>
        <el-table-column prop="name" label="歌手-歌名" width="120" align="center"></el-table-column>
        <el-table-column prop="introduction" label="专辑" width="150" align="center"></el-table-column>
        <el-table-column lable="歌词" align="center">
            <template slot-scope="scope">
                <ul style="height: 100px; overflow: scroll;">
                    <li v-for="(item,index) in parseLyric(scope.row.lyric)" :key="index">
                        {{item}}
                    </li>
                </ul>
            </template>

        </el-table-column>
        <el-table-column lable="歌曲更新" align="center" width="100%">
            <template slot-scope="scope">
                <el-upload :action="uploadUrl(scope.row.id)" 
                :before-upload="beforeAvatorUpload" 
                :on-success="handleAvatorSuccesss">
                <el-button size="mini">更新图片</el-button>
                </el-upload>
                <el-upload :action="uploadSongUrl(scope.row.id)" 
                :before-upload="beforeAvatorSongUpload" 
                :on-success="handleAvatorSongSuccesss">
                <el-button size="mini">更新歌曲</el-button>
                </el-upload>
            </template>
        </el-table-column>
        
        <el-table-column lable="操作" width="150px" align="center">
            <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
                <el-button size="mini" @click="handleDelete(scope.row.id)" type="danger" icon="el-icon-delete" circle></el-button>
            </template>
        </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination 
            background
            layout = "total,prev,pager,next"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="tableData.length"
            @current-change="handleCurrentChange">
            
            </el-pagination>
        </div>
        <el-dialog title="添加歌曲" :visible.sync="centerDialogVisible" width="400px" center>
            <el-form :model="registerForm" ref="registerForm" label-width="80px" action="" id="tf">
            <div>
                <label>歌名</label>
                <el-input type="text" name="name" v-model="registerForm.name"></el-input>
            </div>
            <div>
                <label>专辑</label>
                <el-input type="text" name="introduction" v-model="registerForm.introduction"></el-input>
            </div>
            <div>
                <label>歌词</label>
                <el-input type="textarea" name="lyric" v-model="registerForm.lyric"></el-input>
            </div>
            <div>
                <label>歌曲上传</label>
                <input type="file" name="file">
            </div>
            </el-form>
            <span slot="footer">
                <el-button @click="addSong" size="mini" type="success">提交</el-button>
                <el-button @click="centerDialogVisible = false" size="mini" type="warning">取消</el-button>
            </span>
        </el-dialog>

        <el-dialog title="修改歌曲" :visible.sync="editVisible" width="400px" center>
            <el-form :model="form" ref="form" label-width="80px">
            <el-form-item prop="name" label="歌手-歌名" size="mini">
                <el-input v-model="form.name" placeholder="歌手-歌名"></el-input>
            </el-form-item>

            <el-form-item prop="introduction" label="专辑" size="mini">
               <el-input v-model="form.introduction" placeholder="专辑"></el-input>
            </el-form-item>
            <el-form-item prop="lyric" label="歌词" size="mini">
               <el-input v-model="form.lyric" placeholder="歌词" type="textarea"></el-input>
            </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="editSave" size="mini" type="success">提交</el-button>
                <el-button @click="editVisible = false" size="mini" type="warning">取消</el-button>
            </span>
        </el-dialog>

        <!-- 删除歌曲 -->
        <el-dialog title="删除歌曲" :visible.sync="delVisible" width="250px" center>
            <div align="center">删除不可恢复,确定删除?</div>
            <span slot="footer">
                <el-button @click="deleteRow" size="mini" type="success">确定</el-button>
                <el-button @click="delVisible = false" size="mini" type="warning">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import {mixin} from '../mixins/index'
import '@/assets/js/iconfont.js'
import {singerOfSingerId,updateSong,delSong} from '../api/index'
export default{
    mixins: [mixin],
    data(){
        return{
            singerId: '',    //歌手Id
            singerName: '',  //歌手姓名
            centerDialogVisible: false, // 添加弹框是否显示
            editVisible: false,         //编辑弹框是否提示
            delVisible: false,      //删除弹窗是否显示
            registerForm:{
                // 添加框
                name: '',
                singerName:'',
                introduction: '',
                lyric: ''
            },
            form:{
                // 修改框
                id: '',
                name: '',
                introduction: '',
                lyric: ''
            },
            tableData: [],
            tempData: [],
            select_word:'',
            pageSize: 5, //分页每页大小
            currentPage: 1, //当前页
            idx: -1,
            multipleSelection: [] ,//那些项已经打勾
            toggle: false //播放器图标状态
        }
    },
    computed:{
        ...mapGetters([
            'isPlay'
        ]),
        // 计算当前搜索结果表里的数据
        data(){
            return this.tableData.slice((this.currentPage - 1 ) * this.pageSize,this.currentPage * this.pageSize)
        }
    },
    // 使用watch对搜索框进行监控
    watch:{
        // 搜索框里面内容发生变化时，搜索结果table列表的内容会跟着它发生变化
        select_word:function(){
            if(this.select_word == ''){
                // this.getData();
                this.tableData = this.tempData;
            }else{
                this.tableData = [];
                for(let item of this.tempData){
                    if(item.name.includes(this.select_word)){
                        this.tableData.push(item);
                    }
                }
            }
        }
    },
    created(){
        this.singerId=this.$route.query.id;
        this.singerName=this.$route.query.name;
        this.getData();
    },
        // 退出页面时暂停播放
    destroyed(){
        this.$store.commit('setIsPlay',false);
    },
    methods:{
        // 需要传入当前页的参数
        handleCurrentChange(val){
            this.currentPage = val;
        },
        // 查询歌曲
        getData(){
            this.tableData = [];
            this.tempData = [];
        // 根据Id查询歌曲
            singerOfSingerId(this.singerId).then(res =>{
                this.tempData = res;
                this.tableData = res;
                this.currentPage =1 ;
            })
        },
        // 添加歌手
        addSong(){
            let _this=this;
            var form = new FormData(document.getElementById('tf'));
            form.append('singerId',this.singerId);
            form.set('name',this.singerName+'-'+form.get('name'));
            if(!form.get('lyric')){
                form.set('lyric','[00:00:00]暂无歌词')
            }
            var req = new XMLHttpRequest();
            req.onreadystatechange = function(){
                // req.readyState  == 4 获取到返回的完整数据
                if(req.readyState == 4 && req.status == 200){

                    let res=JSON.parse(req.response);
                    console.log(res);

                    if(res.code){
                        _this.getData();
                        _this.registerForm = {};
                        _this.notify(res.msg,'success');
                    }else{
                        _this.notify('保存失败','error');
                    }
                }
            }
            req.open('post',`${_this.$store.state.HOST}/song/add`,false);
            req.send(form);
            _this.centerDialogVisible = false;
        },
        // 弹出编辑页面
        handleEdit(row){
            this.editVisible = true;
            this.form= {
                id: row.id,
                name: row.name,
                introduction: row.introduction,
                lyric: row.lyric
            }
        },
        // 保存编辑页面数据
        editSave(){
            let params= new URLSearchParams();
            params.append('id',this.form.id);
            params.append('name',this.form.name);
            params.append('introduction',this.form.introduction);
            params.append('lyric',this.form.lyric);

            updateSong(params)
            .then(res =>{
                if(res.code == 1){
                    this.getData();
                    this.handleCurrentChange(1);
                    this.notify("修改成功","success")
                }else{
                    this.notify("修改失败","error")
                }
            })
            .catch(err =>{
                console.log(err);
            });
            this.editVisible = false;
        },
        // 更新图片
        uploadUrl(id){
             return `${this.$store.state.HOST}/song/updateSongPic?id=${id}`
        },
        // 删除一个歌手
        deleteRow(){
            delSong(this.idx)
            .then(res =>{
                if(res){
                    this.getData();
                    this.handleCurrentChange(1);
                    this.notify("删除成功","success")
                }else{
                    this.notify("删除失败","error")
                }
            })
            .catch(err =>{
                console.log(err);
            });
            this.delVisible = false;
        },
        // 解析歌词
        parseLyric(text){
            let lines = text.split("\n");
            let pattern = /\[\d{2}:\d{2}.\d{2,3}\]/;
            let result = [];
            for(let item of lines){
                let value = item.replace(pattern,'');
                result.push(value);
            }
            return result;
        },
    // 上传歌曲之前的校验
        beforeAvatorSongUpload(file){
            var  testMsg = file.name.substring(file.name.lastIndexOf('.')+1);
            const extension = (testMsg == 'mp3');
            if(!extension){
                this.$message({
                    $message:'上传文件只能是MP3格式',
                    type:'error'
                });
                return false;
            }
            return true;
        },
        // 上传成功后
        handleAvatorSongSuccesss(res){
            let _this=this;
            if(res.code == 1){
                _this.getData();
                _this.$notify({
                    title: '上传成功',
                    type:'success'
                });
            }else{
                _this.$notify({
                    title: '上传失败',
                    type:'error'
                });
            }   
        },
        // 更新歌曲url
        uploadSongUrl(id){
             return `${this.$store.state.HOST}/song/updateSongUrl?id=${id}`
        },
        // 切换播放歌曲
        setSongUrl(url,name){
            this.toggle = name ;
            this.$store.commit('setUrl',this.$store.state.HOST + url);
            if(this.isPlay){
                this.$store.commit('setIsPlay',false);
            }else{
                this.$store.commit('setIsPlay',true);
            }
        }
    }
}
</script>

<style scoped>
    .handle-box{
        margin-bottom: 20px;
    }
    .song-img{
        width: 100%;
        height: 80px;
        border-radius: 5px;
        margin-bottom: 5px;
        overflow: hidden;
    }
    .handle-input{
        width: 300px;
        display: inline-block;
    }
    .pagination{
        display: flex;
        justify-content: center;
    }
    .play{
        position: absolute;
        z-index: 100;
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-self: center;
        cursor: pointer;
        top: 18px;
        left: 40px;
    }
    .icon{
        width: 2em;
        height: 2em;
        color: white;
        fill: currentColor;
        overflow: hidden; 
    }
</style>